<template>
  <div>
    <h3>为您推荐</h3>
    <ul class="box" v-if="recommendList.length > 0">
      <li
        class="item-one"
        v-for="item in recommendList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <img :src="item.image" alt="图片" />
        <p>{{ item.name }}</p>
        <div class="section">{{ item.section }}</div>
        <div class="isv">{{ item.free === 1 ? "免费" : "vip" }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import indexApi from "@/api/home/indexFont";
export default {
  name: "recommend",
  data() {
    return {
      recommendList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await indexApi.getRecommend();
      if (res.code === 20000) {
        this.recommendList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    goDetail(id) {
      this.$router.push({
        path: "/details",
        query: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h3 {
  padding-left: 15px;
  padding-bottom: 10px;
}
.box {
  width: 100%;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item-one {
    width: 3.4rem;
    height: 2.4rem;
    margin-bottom: 5px;
    position: relative;
    img {
      width: 100%;
      height: 2rem;
    }
    p {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: 12px;
    }
    .section {
      position: absolute;
      padding: 0 5px;
      right: 10px;
      bottom: 30px;
      background-color: rgba(162, 162, 182, 0.5);
      font-size: 12px;
      color: #fff;
    }
    .isv {
      position: absolute;
      left: 5px;
      top: 5px;
      color: chartreuse;
      font-size: 12px;
    }
  }
}
</style>